<template>
  <ShopLayout :show-breadcrumb="false">
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-20">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
          <!-- Sidebar -->
          <div class="lg:col-span-1">
            <div class="bg-white rounded-2xl p-6 shadow-sm sticky top-8">
              <!-- User Info -->
              <div class="text-center mb-8">
                <div class="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span class="text-2xl font-medium text-gray-700">{{ user?.name?.charAt(0) || 'U' }}</span>
                </div>
                <h3 class="text-lg font-medium text-gray-900">{{ user?.name || '用户' }}</h3>
                <p class="text-sm text-gray-600">{{ user?.email || user?.phone || '未设置联系方式' }}</p>
                <div v-if="user?.birthday" class="mt-2">
                  <p class="text-xs text-gray-500">生日: {{ formatDate(user.birthday) }}</p>
                </div>
                <div v-if="user?.bio" class="mt-2">
                  <p class="text-xs text-gray-500 max-w-xs mx-auto">{{ user.bio }}</p>
                </div>
              </div>

              <!-- Navigation -->
              <nav class="space-y-2">
                <Link
                  v-for="item in navigation"
                  :key="item.route"
                  :href="route(item.route)"
                  :class="[
                    'w-full text-left px-4 py-3 rounded-xl text-sm font-medium transition-colors block',
                    isActive(item.route)
                      ? 'bg-gray-900 text-white'
                      : 'text-gray-600 hover:bg-gray-50'
                  ]"
                >
                  <div class="flex items-center">
                    <component :is="item.icon" class="w-5 h-5 mr-3" />
                    {{ item.name }}
                  </div>
                </Link>
              </nav>
            </div>
          </div>

          <!-- Main Content -->
          <div class="lg:col-span-3">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { computed } from 'vue'
import { Link, usePage } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import {
  UserIcon,
  MapPinIcon,
  CogIcon
} from '@heroicons/vue/24/outline'

// Props
defineProps({
  breadcrumbs: {
    type: Array,
    default: () => ['个人中心']
  }
})

// 获取全局用户数据
const page = usePage()
const user = computed(() => page.props.auth.user)

// 导航菜单
const navigation = [
  { route: 'profile', name: '个人信息', icon: UserIcon },
  { route: 'addresses.index', name: '收货地址', icon: MapPinIcon },
  { route: 'settings', name: '账户设置', icon: CogIcon }
]

// 判断当前激活的导航
const isActive = (routeName) => {
  return route().current(routeName)
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
</script>

